/**
 * 流程基本设置-可见范围单选框组件
 */
import React from 'react';
import { Radio } from 'antd';
import OrganizationSelect from '@/components/OrganizationSelect';
import DutySelect from '@/components/DutySelect';
import { SelectPost, SelectEmployee } from './index';

import styles from './index.less';

const style = { padding: '0 4px', width: 110, marginBottom: 16 };
const RadioForm = React.forwardRef(({ value = {}, onChange, organizationCode, className, maxTagCount = 100 }, ref) => {
    const { scopeField = 'company', scopeValue = [] } = value;

    const handleRadioChange = e => {
        onChange({ scopeField: e.target.value, scopeValue: [], scopeLabel: [] });
    };

    const handleScopeValueChange = (_value, _label) => {
        let scopeLabel = _label;
        let scopeValues = _value;
        // 岗位
        if (scopeField === 'duty') {
            scopeLabel = _value.map(item => item.label);
            scopeValues = _value.map(item => item.key);
        }
        if (scopeField === 'department') {
            scopeLabel = _value.map(item => item.label);
            scopeValues = _value.map(item => item.value);
        }
        if (scopeField === 'employee') {
            scopeLabel = _label.map(item => item.props.label);
        }
        onChange({ ...value, scopeValue: scopeValues, scopeLabel });
    };

    return (
        <div ref={ref} className={className}>
            <Radio.Group value={scopeField} onChange={handleRadioChange}>
                <Radio style={style} value="company">
                    全体员工
                </Radio>
                <Radio style={style} value="duty">
                    指定岗位
                </Radio>
                <Radio style={style} value="post">
                    指定职位
                </Radio>
                <Radio style={style} value="department">
                    指定部门
                </Radio>
                <Radio style={style} value="employee">
                    指定人员
                </Radio>
            </Radio.Group>
            <div className={styles.radioFormInputWrap}>
                {scopeField === 'duty' && (
                    <DutySelect
                        mode="multiple"
                        placeholder="请选择岗位"
                        style={{ width: '100%' }}
                        value={scopeValue}
                        labelInValue
                        maxTagCount={maxTagCount}
                        getPopupContainer={trigger => trigger.parentNode}
                        onChange={handleScopeValueChange}
                    />
                )}
                {scopeField === 'post' && (
                    <SelectPost
                        getChildByOrganizationCode={organizationCode}
                        value={scopeValue}
                        onChange={handleScopeValueChange}
                        treeCheckable
                        placeholder="请选择职位"
                        maxTagCount={maxTagCount}
                        treeDefaultExpandedKeys={scopeValue}
                        getPopupContainer={trigger => trigger.parentNode}
                    />
                )}
                {scopeField === 'department' && (
                    <OrganizationSelect
                        isFunctional
                        treeCheckable
                        isStrictly
                        labelInValue
                        strictlyOutType
                        onChange={handleScopeValueChange}
                        value={scopeValue}
                    />
                )}
                {scopeField === 'employee' && (
                    <SelectEmployee
                        getChildByOrganizationCode={organizationCode}
                        value={scopeValue}
                        onChange={handleScopeValueChange}
                        placeholder="请选择人员"
                        maxTagCount={maxTagCount}
                        getPopupContainer={trigger => trigger.parentNode}
                    />
                )}
            </div>
        </div>
    );
});

export default RadioForm;
